<template>
  <div>
    <div id="echarts" style="height: 400px"></div>
    <div>
      <el-button @click="comeback">实时疫情</el-button>
      <el-button @click="tofoe1">境外输入新增趋势</el-button>
      <el-button @click="tofoe3">境外输入省级Top10</el-button>
    </div>
  </div>
</template>
<script>
import { max } from 'moment';
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
    };
  },

  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  created() {
      this.findData();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
     tofoe1(){
      this.$router.push({
          path: "/echarts/from",
        });
    },
    tofoe3(){
      this.$router.push({
          path: "/echarts/from3",
        });
    },
     comeback(){
      this.$router.push({
          path: "/echarts/index",
        });
    },
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
          let res1 = this.dataList.list.map((item) => {
          return item.province
        });
        //生成一个死亡人数的数组
        let res2 = this.dataList.list.map((item) => {
          return item.outside;
        });
        this.initEchart(res1,res2);
      });
    },
    
    initEchart(val1,val2) {
      echarts.init(document.getElementById("echarts")).dispose();
      //初始化图标
      var myChart = echarts.init(document.getElementById("echarts"));

      // 指定图表的配置项和数据
     var option = {
                      title: {
                      text: '境外输入省级Top10',
                      subtext: '单位:例',
                      
                  },
                  dataset: [{
                      dimensions: ['province','many'],
                      source: [[val1[0],val2[0]],
                               [val1[1],val2[1]],
                               [val1[2],val2[2]],
                               [val1[3],val2[3]],
                               [val1[4],val2[4]],
                               [val1[5],val2[5]],
                               [val1[6],val2[6]],
                               [val1[7],val2[7]],
                               [val1[8],val2[8]],
                               [val1[9],val2[9]]
                      ]
                  }, {
                      transform: {
                          type: 'sort',
                          config: { dimension: 'many', order: 'desc' }
                      }
                  }],
                   visualMap: {
                      top: 10,
                      right: 10,
                      pieces: [{
                          gt: 0,
                          lte: 1,
                          color: 'green'
                      }, {
                          gt: 1,
                          lte: 2,
                          color: 'blue'
                      }, {
                          gt: 2,
                          lte: 10,
                          color: 'yellow'
                      }, {
                          gt: 20,
                          color: 'red'
                      }],
                  },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                      interval: 0, 
                      rotate: 30 ,
                      formatter(val) {
                        return val.split("").join("\n");
                      },
                    },
                },
                yAxis: {
            
                },
                tooltip : {
                  formatter: function (params) {
                    // do some thing
                    return  "省份:" +params.name+'<br>'+'新增人数:'+params.value[1]
                  }
                },
                series: [{
                    barWidth:15,
                    datasetIndex: 1,
                    encode:{x:'province',y:'many'},
                    itemStyle: {   
                      //通常情况下：
                      normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                      color: function (params){
                        var colorList = ['red','#FF6100','#FF6103','#FF8000','#FF9912',
                                         '#EB8E55','#DAA569','#E3A869','#FFD700','#FFE384'];
                        return colorList[params.dataIndex];
                      }
                    },
                     //鼠标悬停时：
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                    },
                        type: 'bar', 
                    },]
                };
      
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      
    },
  },
};
</script>
<style scoped>
  div{
    position: relative;
  }
  div div:nth-child(2) {
    margin-top: 50px;
    left: 50%;
    margin-left: -300px;
  }
  div div .el-button {
    width: 200px;
  }
  div div .el-button:last-child {
    background-color: #00bec7;;
    color: white;
  }
</style>